<template>
  <!-- 管理员专用搜索表单 -->
  <div class="max-w-7xl mx-auto mb-6">
    <form class="relative group" @submit.prevent="handleSearch">
      <label for="admin-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">搜索文章</label>
      <div class="relative overflow-hidden shadow-lg transition-all duration-300 bg-white dark:bg-gray-800 border-0 group-hover:shadow-xl">
        <div class="absolute top-2 start-0 flex items-center ps-7 pointer-events-none">
          <svg class="w-6 h-6 text-[#991E29] dark:text-[#e57373] opacity-70 group-hover:opacity-100 transition-opacity duration-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
          </svg>
        </div>
        <input 
          type="search" 
          id="admin-search" 
          v-model="searchKeyword"
          class="block w-full p-4 ps-16 text-lg text-gray-900 border-0 bg-transparent focus:ring-0 focus:outline-none dark:text-white" 
          placeholder="搜索文章标题、内容..." 
          required 
        />
        <button 
          type="submit" 
          :disabled="loading"
          class="text-white absolute end-3 top-1/2 transform -translate-y-1/2 bg-[#991E29] hover:bg-[#C32A31] focus:outline-none font-medium text-lg px-8 py-2 transition-all rounded-full duration-300 hover:scale-105 flex items-center justify-center"
        >
          <span v-if="loading" class="mr-2">
            <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
          </span>
          搜索
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 搜索关键词
const searchKeyword = ref('');
// 加载状态
const loading = ref(false);

// 定义props
const props = defineProps({
  // 初始搜索关键词
  initialKeyword: {
    type: String,
    default: ''
  }
});

// 定义emit
const emit = defineEmits(['search']);

// 处理搜索
const handleSearch = () => {
  if (!searchKeyword.value.trim()) return;
  
  loading.value = true;
  
  // 触发搜索事件，将关键词传递给父组件
  emit('search', searchKeyword.value);
  
  // 模拟搜索延迟
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

// 初始化搜索关键词
if (props.initialKeyword) {
  searchKeyword.value = props.initialKeyword;
}
</script>

<style scoped>
/* 无需额外样式 */
</style>
